/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description: 竖直向左开关
 * CopyRight:
 **/

import React, {Component} from 'react';

import './index.css';

export default class VerticalLeftValve extends Component {
  constructor( props) {
    super( props);
    console.log( 'VerticalLeftValve props', this.props);
    /*
     * * props 参数说明
     * x：相对位置x坐标
     * y: 相对位置y坐标
     * width： 宽度
     * height：高度
     * color: 水流颜色
     * 管道的默认颜色 #949494
     * state状态表示，是否有水流, 默认颜色： #1830fb
     * */
    this.state = {
      work: this.props.work ? this.props.work : false,
    };
  }

  render() {
    return (
      <svg className="VerticalLeftValveBox" label={this.props.label ? this.props.label : 'VerticalLeftValve'} x={ this.props.x ? this.props.x : "000"} y={ this.props.y ? this.props.y : "500"} width={ this.props.width ? this.props.width : "100"} height={ this.props.height ? this.props.height : "100"}>
        <svg className="VerticalLeftValveContent" viewBox="0 0 100 100">
          <g style={{ display: this.state.work ? 'block' : 'none'}}>
            <rect x="25%" y="45%" rx="0%" ry="0%" width="50%" height="10%" fill="#949494">
            </rect>
            <path d="M40,44 L42,56 M45,44 L47,56 M50,44 L52,56 M55,44 L57,56 M60,44 L62,56 M65,44 L67,56 M70,44 L72,56 M75,44 L77,56 " strokeWidth="2" opacity="0.7" stroke="#303030">
            </path>
            <rect x="5%" y="5%" rx="10%" ry="10%" width="20%" height="90%" fill="#949494">
            </rect>
          </g>
          <rect x="95%" y="25%" rx="0" ry="0" width="5%" height="50%" fill="#949494">
          </rect>
          <rect x="75%" y="30%" rx="5%" ry="5%" width="20%" height="40%" fill="#949494">
          </rect>
          <g style={{ display: this.state.work ? 'none' : 'block'}}>
            <rect x="60%" y="45%" rx="0%" ry="0%" width="15%" height="10%" fill="#949494">
            </rect>
            <rect x="40%" y="5%" rx="10%" ry="10%" width="20%" height="90%" fill="#949494">
            </rect>
            <circle cx="50%" cy="50%" r="25%" className="valveStopSignBackground">
            </circle>
            <circle cx="50%" cy="50%" r="22%" className="valveStopSignBorder">
            </circle>
            <rect x="35%" y="45%" rx="0%" ry="0%" width="30%" height="10%" className="valveStopSignBrick">
            </rect>
          </g>
          <g className="focus">
            <circle cx="50%" cy="50%" r="10%" className="crossHair">
            </circle>
            <circle cx="50%" cy="50%" r="5%" className="crossHair">
            </circle>
            <rect x="5%" y="5%" width="90%" height="90%" rx="5%" ry="5%" className="crossHair">
            </rect>
          </g>
        </svg>
      </svg>
    )
  }
}

